<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>异步组件</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <suspense>
            <template #default>
                <async-com></async-com>
            </template>
            <template #fallback>
                <h1>Loading...</h1>
            </template>
        </suspense>
    </div>
    <script>
        const {createApp,defineAsyncComponent} = Vue

        const app = createApp({
            data(){
                return {}
            },
            methods:{},
            computed:{}
        })
        const AsynCom = defineAsyncComponent(        
            ()=>{
               
               return new Promise(
                (resolve,reject)=>{

                    
                    setTimeout(() => {
                        resolve({
                            template:`<div>异步形态开梓</div>`
                        })
                    }, 3000);
                    
                }
               ) 
            }

        )
        app.component("async-com",AsynCom)
        app.mount('#app')
    </script>
</body>
</html>